<template>
 <header class="main-header">
    <!-- Logo -->
    <router-link class="logo" v-bind:to="{path:'/wrapper'}">
        美嘉OA系统
    </router-link>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
              <a class="user" style="color:#fff" data-toggle="dropdown">
                  <span>{{activeteamname}}</span>
              </a>
              <ul class="dropdown-menu">
                  <li v-for="(team,index) in teams" @click="changeteam(team.fteamid,team.ftitle)">
                      <a>{{team.ftitle}}</a>
                  </li>
              </ul>
          </li>
          <li class="dropdown user user-menu">
            <a class="user" style="color:#fff" data-toggle="dropdown">
             <i class="fa fa-user"></i>
              <span>{{username}}</span>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a @click="showmodal">修改密码</a>
                </li>
            </ul>
          </li>
          <li>
            <a class="user" title="退出" @click="logout" style="color:#fff">
             <i class="fa fa-sign-out"></i>
            </a>
          </li>
          <li><a style="color:#fff" @click="showChangeTheme = !showChangeTheme"><i class="fa fa-gears"><i></a></li>
        </ul>
      </div>
    </nav>
                
    <div class="select-theme" v-bind:class="{selectthemeclose : showChangeTheme}">
        <a style="font-size:14px;float:left"><span>更改主题</span></a>
        <ul>
            <li><div style="background-color:#2980b9" data-theme= "theme-blue" @click="changeTheme"></div></li>
            <li><div style="background-color:#27ae60" data-theme= "theme-black" @click="changeTheme"></div></li>
            <li><div style="background-color:#fd9619" data-theme= "theme-orange" @click="changeTheme"></div></li>
            <li><div style="background-color:#800080" data-theme= "theme-purple" @click="changeTheme"></div></li>
        </ul>
    </div>
    <div class="modal fade" id="modal">
  <div class="modal-dialog model-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">修改密码</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <label>请输入新密码</label>
            <input v-model="pass1" type="password" class="form-control">
        </div>
        <div class="form-group">
            <label>请重新输入密码</label>
            <input v-model="pass2" type="password" class="form-control">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" @click="changepass">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

  </header>
</template>
<script>
    import myNav from './Nav'
    import myModal from './Modal'
    export default {
        data() {
            return {
                theme:this.$store.state.theme,
                teams: '',
                showChangeTheme:true,
                activeteamid: localStorage.activeteamid,
                activeteamname: localStorage.activeteamname,
                username: localStorage.username,
                pass1: '',
                pass2: ''
            }
        },
        methods: {
            changeTheme(e){
                localStorage.theme = $(e.target).attr('data-theme')
                this.$store.commit('changeTheme',$(e.target).attr('data-theme'))
            },
            logout: function() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/user/logout',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': localStorage.activeteamid,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    success: function(retdata) {
                        localStorage.username = ''
                        localStorage.userid = ''
                        localStorage.token = ''
                        _this.$router.replace('/')
                    },
                    error: function(request) {

                    },
                });

            },
            showmodal: function() {
                $('#modal').modal('show')
            },
            changepass: function() {

                if (this.pass1 != this.pass2) {
                    this.$store.commit('showModal','两次输入的密码不一致')
                } else {
                    var _this = this
                    $.ajax({
                        url: 'http://192.168.1.66:808/api/user/update2',
                        dataType: 'json',
                        type: 'post',
                        crossDomain: true,
                        data: {
                            fidno: localStorage.userid,
                            token: localStorage.token,
                            userpassword: _this.pass1,
                            teamid: localStorage.activeteamid,
                        },
                        success: function(res) {
                            if (res.Table1[0].message == 'ok') {
                                $('#modal').modal('hide')
                                _this.$store.commit('showModal','密码修改成功，请重新登录')
                                localStorage.userid = ''
                                localStorage.token = ''
                                localStorage.username = ''
                                _this.$router.replace('/')
                            } else {
                                _this.$store.commit('showModal','修改失败')
                            }
                        },
                        error: function() {
                            _this.$store.commit('showModal','连接错误')
                        }
                    })
                }
            },
            changeteam(teamid, name) {
                localStorage.activeteamid = teamid
                localStorage.activeteamname = name
                this.activeteamname = name
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/user/changeteam',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': teamid,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    success: function(retdata) {
                        if (retdata.Table1[0].status == true) {
                            _this.$router.replace('/wrapper')
                        }
                    },
                    error: function(retdata) {},
                });
            }
        },
        components: {
            myNav,
            myModal
        },
        mounted() {
            var _this = this
            $.ajax({
                type: 'POST',
                url: 'http://192.168.1.66:808/api/user/fetchuserteam',
                data: {
                    'token': localStorage.token,
                    'userid': localStorage.userid,
                    teamid: localStorage.activeteamid,
                },
                dataType: 'json',
                crossDomain: true,
                error: function(request) {
                    if (request.Table1[0].message == '非法token或已超时') {
                        _this.$store.commit('showModal','非法token或已超时')
                    }
                },
                success: function(retdata) {
                    _this.teams = retdata.Table2
                }
            });
        }

    }
</script>
<style>
    @import '../assets/css/skins/_all-skins.min.css';
   .navbar-nav>li>a:hover {
      background-color: #000;
      opacity: 0.9
  }
    .select-theme{
        position:fixed;
        right: 0;
        background-color: #000;
        min-height: 100%;
        width: 180px;
        padding: 10px;
    }
    @media(max-width: 768px){
        /*margin-top:100px;*/
    }
    .selectthemeclose {
        transform:translate(180px)
    }

    .select-theme li{
        float: left;
        margin:5px;
    }
.select-theme ul{
    clear: both;
    list-style: none;
    padding:0
}
    .select-theme li div {
        list-style: none;
        height: 20px;
        width: 20px;
        border:1px solid ;
        border-radius: 2px;
        cursor:pointer
    }


</style>